<template>
  <div>
    <div>
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-carousel :interval="3000" height="280px" width="200px">
              <el-carousel-item v-for="item in images" :key="item">
                <el-image :src="item.idView" fit="contain"></el-image>
              </el-carousel-item>
            </el-carousel>
            <p class="s_b_p"><i>信访宣传栏</i></p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light">
            <el-table :data="tableData" style="width:100%" height="280px">
              <el-table-column prop="id" v-if="false"></el-table-column>
              <el-table-column prop="title" label="信访公告" width="250">
                <template slot-scope="scope">
                  <div
                    class="bule-font-color"
                    @click="publishDetail(scope.row)"
                  >
                    <font color="#409EFF">{{ scope.row.title }}</font>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="publisher" label="发布人" width="65">
              </el-table-column>

              <el-table-column prop="time" width="105" label="发布时间">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <p class="aaaa">查询信访进度</p>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="查询码" prop="code">
                <el-input v-model="ruleForm.code" maxlength="5"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone" maxlength="11"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >立即查询</el-button
                >
                <el-button type="success" @click="resetForm('ruleForm')"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-divider></el-divider>
    <el-dialog
      title="查询结果"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <el-descriptions class="margin-top" title="" :column="3" :size="size">
        <template slot="extra"> </template>
        <el-descriptions-item label="姓名">{{
          visitForm.name
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          visitForm.phone
        }}</el-descriptions-item>
        <el-descriptions-item label="地址">{{
          visitForm.address
        }}</el-descriptions-item>
        <el-descriptions-item label="信访状态">
          <el-tag size="small" v-if="visitForm.status === 0" type="info"
            >未处理</el-tag
          >
          <el-tag size="small" v-else-if="visitForm.status === 1" type="primary"
            >已受理</el-tag
          >
          <el-tag size="small" v-else-if="visitForm.status === 2" type="primary"
            >已转发</el-tag
          >
          <el-tag size="small" v-else-if="visitForm.status === 3" type="danger"
            >已驳回</el-tag
          >
          <el-tag size="small" v-else-if="visitForm.status === 4" type="primary"
            >处理中</el-tag
          >
          <el-tag size="small" v-else-if="visitForm.status === 5" type="warning"
            >已结案</el-tag
          >
          <el-tag size="small" v-else-if="visitForm.status === 6" type="success"
            >已归档</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{
          visitForm.remarks
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-dialog
      title="公告详情"
      :visible.sync="dialogVisible1"
      width="600px"
      :before-close="handleClose1"
    >
      <el-descriptions class="margin-top" title="" :column="1" :size="medium" border>
        <template slot="extra"> </template>
        <el-descriptions-item label="标题">
          {{ publishForm.title }}
        </el-descriptions-item>
        <el-descriptions-item label="内容">{{
          publishForm.content
        }}</el-descriptions-item>
        <el-descriptions-item label="公告文件"><el-button type="text" @click="downLoad(publishForm.documents)" v-if="publishForm.documents" >查看文件</el-button ></el-descriptions-item>
         <el-descriptions-item label="发布人">{{
          publishForm.publisher
        }}</el-descriptions-item>
         <el-descriptions-item label="发布时间">{{
          publishForm.time
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>
<script>
import Menu from "../components/Menu";
export default {
  name: "Home",
  components: {
    Menu
  },
  data() {
    return {
      images: [
        { id: 0, idView: "static/images/1.jpeg" },
        { id: 1, idView: "static/images/2.jpeg" },
        { id: 2, idView: "static/images/3.jpeg" },
        { id: 3, idView: "static/images/4.jpeg" },
        { id: 4, idView: "static/images/5.jpeg" },
        { id: 5, idView: "static/images/6.jpeg" },
        { id: 6, idView: "static/images/7.jpeg" },
        { id: 7, idView: "static/images/8.jpeg" },
        { id: 8, idView: "static/images/9.jpeg" },
        { id: 9, idView: "static/images/10.jpeg" },
        { id: 10, idView: "static/images/11.jpeg" }
      ],
      src: "static/images/top1.jpeg",
      activeIndex: "home",
      tableData: [{}],
      ruleForm: {
        code: "",
        phone: ""
      },
      publishForm: {
        title: '',
        content: '',
        documents: '',
        publisher:'',
        time:''
      },
      dialogVisible: false,
      dialogVisible1: false,
      visitForm: {},
      rules: {
        code: [
          { required: true, message: "请输入查询码", trigger: "blur" },
          { min: 5, max: 5, message: "长度必须为5位", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度必须为11位", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$router.push(key);
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleClose1() {
      this.dialogVisible1 = false;
    },
    publishDetail(row) {
      this.publishForm = row;
      this.dialogVisible1 = true;
    },
    downLoad(url) {
      this.dialogVisible1=false;
      window.open(url);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios
            .get("/file/select", {
              params: {
                phone: this.ruleForm.phone,
                code: this.ruleForm.code
              }
            })
            .then(res => {
              if (res.data.code == 200) {
                this.visitForm = res.data.data;
                this.dialogVisible = true;
                this.resetForm("ruleForm");
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "error"
                });
                this.resetForm("ruleForm");
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getpublish() {
      this.$axios.get("/notice/list").then(res => {
        this.tableData = res.data.data;
      });
    }
  },
  created() {
    this.getpublish();
  }
};
</script>

<style>
.header {
  float: left;
  width: 1410px;
  height: 28px;
  line-height: 28px;
  z-index: 101;
  padding: 0px;
  background: #0a2556;
  margin-bottom: 1px;
}
.m20 {
  margin-left: 20px;
}
.aaa {
  height: 300px;
  width: 1410px;
}
.aaaa {
  text-align: center;
}

.wi {
  width: 50px;
}
.s_b_p {
  float: left;
  height: 25px;
  width: 321px;
  line-height: 25px;
  text-align: center;
}
.s_b_p i {
  width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
.my-label {
  background: #609346;
}

.my-content {
  background: #fde2e2;
}
</style>
